<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

  <link rel="stylesheet" href="http://106.12.207.1:8080/wuliucommon/css/sm.min.css">
  <link rel="stylesheet" href="http://106.12.207.1:8080/wuliucommon/css/sm-extend.min.css">
  <script type="text/javascript" src="http://106.12.207.1:8080/wuliucommon/common/common/common.js"></script>
  <style type="text/css">
    .trackingTitle{
      margin: 1rem 1.5rem 0 1.5rem;
      font-size: 19px;
    }

    .page{
      background-color: white;      
    }

    .list-block{
      margin: 0;
    }
    .last-block-rui{
      margin-bottom: 2rem;
    }
    
 
  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page" style="overflow: auto;padding-bottom: 4rem;">
 
      <!-- 页面结尾 -->
      
       
      <div>
        <h1 class="trackingTitle">集装箱运营状态信息看板</h1>
        <h2 class="trackingTitle" id="updatetime_id">更新时间：</h2>
        <div class="list-block">
          
          <ul>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">装货量：</div>
                <div class="item-after">
                  <span id="box_load"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">卸货量：</div>
                <div class="item-after">
                  <span id="box_unload"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">空箱：</div>
                <div class="item-after">
                  <span id="box_empty"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">重箱：</div>
                <div class="item-after">
                  <span id="box_heavy"></span>
                </div>
              </div>
            </li>

          </ul>
        </div>
      </div>

      <div>
        <h1 class="trackingTitle">空箱闲置</h1>
        <div class="list-block">
          <ul>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">10-15天：</div>
                <div class="item-after">
                  <span id="box_empty_ten"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">16-30天：</div>
                <div class="item-after">
                  <span id="box_empty_sixteen"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">30-50天：</div>
                <div class="item-after">
                  <span id="box_empty_thirty"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">>50天：</div>
                <div class="item-after">
                  <span id="box_empty_fifty"></span>
                </div>
              </div>
            </li>

          </ul>
        </div>
      </div>


      <div>
        <h1 class="trackingTitle">重箱滞压</h1>
        <div class="list-block">
          <ul>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">10-15天：</div>
                <div class="item-after">
                  <span id="box_heavy_ten"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">16-30天：</div>
                <div class="item-after">
                  <span id="box_heavy_sixteen"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">30-50天：</div>
                <div class="item-after">
                  <span id="box_heavy_thirty"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">>50天：</div>
                <div class="item-after">
                  <span id="box_heavy_fifty"></span>
                </div>
              </div>
            </li>

          </ul>
        </div>
      </div>


      <div>
        <h1 class="trackingTitle">装货合格数</h1>
        <div class="list-block">
          <ul>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">合格：</div>
                <div class="item-after">
                  <span id="loading_qualified"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">不合格：</div>
                <div class="item-after">
                  <span id="loading_unqualified"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">不可接受：</div>
                <div class="item-after">
                  <span id="loading_refuse"></span>
                </div>
              </div>
            </li>

          </ul>
        </div>
      </div>

      <div>
        <h1 class="trackingTitle">卸货合格数</h1>
        <div class="list-block">
          <ul>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">合格：</div>
                <div class="item-after">
                  <span id="unloading_qualified"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">不合格：</div>
                <div class="item-after">
                  <span id="unloading_unqualified"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">不可接受：</div>
                <div class="item-after">
                  <span id="unloading_refuse"></span>
                </div>
              </div>
            </li>

          </ul>
        </div>
      </div>

      <div>
        <h1 class="trackingTitle">维修</h1>
        <div class="list-block">
          <ul>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">累计维修数：</div>
                <div class="item-after">
                  <span id="repair_num"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">累计大修：</div>
                <div class="item-after">
                  <span id="repair_big_num"></span>
                </div>
              </div>
            </li>
            <li class="item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">累计普修：</div>
                <div class="item-after">
                  <span id="repair_common_num"></span>
                </div>
              </div>
            </li>

          </ul>
        </div>
      </div>


    </div>
  </div>

<script type="text/javascript" src="http://106.12.207.1:8080/wuliucommon/js/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='http://106.12.207.1:8080/wuliucommon/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://106.12.207.1:8080/wuliucommon/js/js/sin.js' charset='utf-8'></script>
<script src="http://106.12.207.1:8080/wuliucommon/js/js/swiper/ser.js"></script>
<script type="text/javascript">

    // 获取数据
    function getBoxStatus() {
      // 调接口
      let param = {}
      let url = '/boxactStatus/api/list'+SESSIONID;
      net_request('get',url,param,boxSuccessCallBack,boxErrorCallBack);
    }
    function boxSuccessCallBack(data) {
      var boxData = data.data[0];
      // 计划详情
      $$('#updatetime_id').html("更新时间："+boxData.updateDate);
      $$('#box_load').text(boxData.boxLoad + '吨')
      $$('#box_unload').text(boxData.boxUnload  + '吨')
      $$('#box_empty').text(boxData.boxEmpty  + '只')
      $$('#box_heavy').text(boxData.boxHeavy  + '只')
      // 空箱闲置
      $$('#box_empty_ten').text(boxData.boxEmptyTen  + '只')
      $$('#box_empty_sixteen').text(boxData.boxEmptySixteen  + '只')
      $$('#box_empty_thirty').text(boxData.boxEmptyThirty  + '只')
      $$('#box_empty_fifty').text(boxData.boxEmptyFifty  + '只')
      // 重箱质押
      $$('#box_heavy_ten').text(boxData.boxHeavyTen  + '只')
      $$('#box_heavy_sixteen').text(boxData.boxHeavySixteen  + '只')
      $$('#box_heavy_thirty').text(boxData.boxHeavyThirty  + '只')
      $$('#box_heavy_fifty').text(boxData.boxHeavyFifty  + '只')
      // 装货合格数
      $$('#loading_qualified').text(boxData.loadingQualified  + '只')
      $$('#loading_unqualified').text(boxData.loadingUnqualified  + '只')
      $$('#loading_refuse').text(boxData.loadingRefuse  + '只')
      // 卸货合格数
      $$('#unloading_qualified').text(boxData.unloadingQualified  + '只')
      $$('#unloading_unqualified').text(boxData.unloadingUnqualified  + '只')
      $$('#unloading_refuse').text(boxData.unloadingRefuse  + '只')
      // 维修
      $$('#repair_num').text(boxData.repairNum  + '只')
      $$('#repair_big_num').text(boxData.repairBigNum  + '只')
      $$('#repair_common_num').text(boxData.repairCommonNum  + '只')
    }
    function boxErrorCallBack(data) {
    }


    // 初始化
    $(function(){
        getBoxStatus();  
      $.init();
    });
  </script>
</body>
</html>